<template>

  <div>

    <div class="cation-content">
      <div style="height:10px"></div> <!-- 可以删除 -->
      <div class="cation-middle">

        <dl class="cation-list">
          <dt>分类</dt>
          <dd>
            <a href="#" rel="" name="mode" class="all on">全部</a>
            <a href="#" rel="服装鞋包" name="mode" class="default">服装鞋包</a>
            <a href="#" rel="家电数码" name="mode" class="default">家电数码</a>
            <a href="#" rel="英文外贸" name="mode" class="default">英文外贸</a>
            <a href="#" rel="英文外贸" name="mode" class="default"> 综合通用</a>

            <a href="#" rel="食品保健" name="mode" class="default">食品保健</a>
            <a href="#" rel="团购模板" name="mode" class="default">团购模板</a>
            <a href="#" rel="美容护肤" name="mode" class="default">美容护肤</a>
            <a href="#" rel="珠宝饰品" name="mode" class="default">珠宝饰品</a>
            <a href="#" rel="鲜花礼品" name="mode" class="default">鲜花礼品</a>
            <a href="#" rel="童装母婴" name="mode" class="default">童装母婴</a>

          </dd>
        </dl>
        <dl class="cation-list">
          <dt>主题</dt>
          <dd>
            <a href="#" rel="" name="theme" class="all on">全部</a>
            <a href="#" rel="古典雅致" name="theme" class="default">古典雅致</a>
            <a href="#" rel="可爱温馨" name="theme" class="default">可爱温馨</a>
            <a href="#" rel="时尚简约" name="theme" class="default">时尚简约</a>
            <a href="#" rel="潮流酷炫" name="theme" class="default">潮流酷炫</a>
            <a href="#" rel="节日庆典" name="theme" class="default">节日庆典</a>
          </dd>
        </dl>
        <dl class="cation-list">
          <dt>色系</dt>
          <dd>
            <a href="#" rel="" name="system" class="all on">全部</a>
            <a href="#" rel="多彩" name="system" class="default">多彩</a>
            <a href="#" rel="橙色" name="system" class="default">橙色</a>
            <a href="#" rel="粉色" name="system" class="default">粉色</a>
            <a href="#" rel="红色" name="system" class="default">红色</a>
            <a href="#" rel="绿色" name="system" class="default">绿色</a>
            <a href="#" rel="蓝色" name="system" class="default">蓝色</a>
            <a href="#" rel="黑色" name="system" class="default">黑色</a>
          </dd>
        </dl>
        <dl class="cation-list">
          <dt>价格</dt>
          <dd>
            <a href="#" rel="" name="price" class="all on">全部</a>
            <a href="#" rel="2000 - 6000" name="price" class="default">2000 - 6000</a>
            <a href="#" rel="6000 - 10000" name="price" class="default">6000 - 10000 </a>
            <a href="#" rel="10000 - 14000" name="price" class="default">10000 - 14000 </a>
            <a href="#" rel="18000 - 22000" name="price" class="default">18000 - 22000</a>
            <a href="#" rel="26000 - 30000" name="price" class="default">26000 - 30000</a>
          </dd>
        </dl>
             <mark
                     v-for="item,key in choose"
                     @click="delFn(key)"
             >
                 {{item}}
                 <a href="javascript:;"
                 >x</a>
             </mark>
        <dl class="cation-list" v-for="item,i in dataList">
          <dt>{{item.title}}</dt>
          <dd>
            <a  href="javascript:;" rel="2000 - 6000"  v-for="(val,j) in item.list" :name="'asd'+item.index" :class="{on:item.index===j}"  @click="_select(val,i,j)">{{j}},{{val}}</a>
          
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>
    <script type="text/javascript" src="../lib/jquery.min.js"></script>
  
<script>
import s from "../lib/current";
var data1 = [
           
        ]
data1.forEach(item => item.index - 1);
export default {
  data() {
    return {
      msg: "variety",
      dataList: data1,
       choose:{}
    };
  },
  methods: {
    _select(val, i, j) {
      console.log(this.dataList[i].index, j);
      this.$set(this.choose,i,val)
      this.dataList[i].index = j;
    }
  },
  mounted() {}
};
</script >
<style scoped>
@import "../../static/css/style.css";
</style>

